//前缀：r-fx-
//row 行，col 列
//r-fx-row-
//c居中，sp水平，cz垂直，lb两边

.r-fx-row {
    //flex 布局，行模式
    display: flex;
    flex-direction: row;
}

.r-fx-col {
    // flex 布局，列模式
    display: flex;
    flex-direction: column;
}

.r-fx-row-c {
    //水平居中+垂直居中
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.r-fx-col-c {
    //水平居中+垂直居中
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.r-fx-row-spc {
    //行模式，水平居中
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.r-fx-col-spc {
    //列模式，水平居中
    display: flex;
    flex-direction: column;
    align-items: center;
}

.r-fx-row-czc {
    //行模式，垂直居中
    display: flex;
    flex-direction: row;
    align-items: center;
}

.r-fx-col-czc {
    //列模式，垂直居中
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.r-fx-row-lb {
    //行模式，左右两边对齐
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.r-fx-col-lb {
    //列模式，上下两边对齐
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.r-fx-row-lb-sb {
    //行模式，左右两边对齐，并且靠上边
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.r-fx-col-lb-zb {
    //列模式，上下两边对齐，并且靠左对齐
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.r-fx-row-lb-czc {
    //行模式，左右两边对齐，并且垂直居中
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.r-fx-col-lb-spc {
    //列模式，上下两边对齐，并且水平居中
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.r-fx-row-lb-xb {
    //行模式，左右两边对齐，并且靠下边
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}

.r-fx-col-lb-yb {
    //列模式，上下两边对齐，并且靠右对齐
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}

.r-fx-row-zbs {
    //行模式，靠左上对齐
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
}

.r-fx-row-ybs {
    //行模式，靠右上对齐
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;
}

.r-fx-row-zbx {
    //行模式，靠左下对齐
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
}

.r-fx-row-ybx {
    //行模式，靠右下对齐
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
}

.r-fx-row-zbz {
    //行模式，靠左中对齐
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.r-fx-row-ybz {
    //行模式，靠右中对齐
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.r-fx-col-zbs {
    //列模式，靠左上对齐
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.r-fx-col-ybs {
    //列模式，靠右上对齐
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
}

.r-fx-col-zbx {
    //列模式，靠左下对齐
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}

.r-fx-col-ybx {
    //列模式，靠右下对齐
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
}

.r-fx-col-zs {
    //列模式，靠中上对齐
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.r-fx-col-zx {
    //列模式，靠中下对齐
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}